<template>
	<view class="profile-list-item d-flex jc-between ai-center px-3" hover-class="profile-list-item-hover" @tap="selectItem(index)">
		<view class="left d-flex ai-center">
			<view v-if="item.icon" class="iconfont" :class="['icon-' + item.icon]" :style="{'color': item.iconColor}"></view>{{item.name}}
		</view>
		<view class="right">
			<view class="iconfont icon-jinru"></view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
			},
			index: {
				type: Number
			}
		},
		methods: {
			selectItem(index) {
				switch (this.item.tapType) {
					case 'router':
						if (this.item._name) {
							this.$Router.push({
								name: this.item._name
							})
						}
						break;
					case "clear":
						uni.showModal({
							"title": "提示",
							content: "是否要清除缓存",
							confirmText: "立即清除",
							success: res => {
								if (res.confirm) {
									uni.clearStorage()
									uni.showToast({
										title: "清除缓存成功！"
									})
								}
							}
						})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.profile-list-item {
		padding: 16upx 20px;
		border-top: 1upx solid #F4F4F4;
		border-bottom: 1upx solid #F4F4F4;
		color: #333333;

		.icon-jinru {
			color: #CCCCCC;
		}

		.left {
			.iconfont {
				margin-right: 6upx;
				font-size: 36upx;
				margin-top: 3upx;
			}
		}
	}

	.profile-list-item-hover {
		background-color: #f4f4f4;
	}
</style>
